import React, { useState } from 'react';
import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import Button from './components/Button/button.tsx';
import Menu from './components/Menu/menu.tsx';
import MenuItem from './components/Menu/menuItem.tsx';
import SubMenu from './components/Menu/subMenu.tsx';
import Icon from './components/Icon/icon.tsx';
import Transition from './components/Transition/transition.tsx';
import Input from "./components/Input/input.tsx";
import Upload from './components/Upload/upload.tsx';
library.add(fas); // 添加全部图标
// 拥有超长编译过程！！
const App: React.FC = () => {
  const [show, setShow] = useState<boolean>(false);
  return (
    <div className="App">
      <header className="App-header">
        <Button disabled>Hello yyy</Button>
        <Button btnType="link" href="http://www.baidu.com" disabled>Baidu</Button>
        <Button btnType="link" href="http://www.baidu.com" target='_blank'>Baidu</Button>
        <Button btnType="primary" size="lg">Hello yyy</Button>
        <Button btnType="danger" size="sm">Hello yyy</Button>
        <Button btnType="default" size="sm">Hello yyy</Button>
        <hr />

        <Upload action="www"></Upload>

        <Menu defaultIndex='0' onSelect={(index) => { alert(index) }} >
          <MenuItem disabled>item1</MenuItem>
          <MenuItem >item2</MenuItem>
          <SubMenu title="下拉菜单">
            <MenuItem >下拉1</MenuItem>
            <MenuItem >下拉2</MenuItem>
            <MenuItem >下拉3</MenuItem>
          </SubMenu>
          <MenuItem >item3</MenuItem>
        </Menu>
        <Menu defaultIndex='0' onSelect={(index) => { alert(index) }} mode='vertical' defaultOpenSubMenus={['3']}>
          <MenuItem >item1</MenuItem>
          <MenuItem >item2</MenuItem>
          <MenuItem >item3</MenuItem>
          <SubMenu title="下拉菜单">
            <MenuItem >下拉1</MenuItem>
            <MenuItem >下拉2</MenuItem>
            <MenuItem >下拉3</MenuItem>
          </SubMenu>
        </Menu>
      </header>
      <Icon icon="arrow-down" theme="danger" size="5x"></Icon>
      <Button onClick={() => { setShow(!show) }}>Toggle</Button>
      <Transition in={show} timeout={300} animation="zoom-in-left">
          <p>https://react.dev</p>
      </Transition>
      <Transition in={show} timeout={300} animation="zoom-in-left" wrapper>
        <Button btnType="danger" size="sm">danger btn</Button>
      </Transition>
      <Input icon="search" size="sm" style={{ width: "300px" }}></Input>
      <div>
        <a href="https://react.dev">Learn React</a>
      </div>
    </div>
  );
}

export default App;
